<!--
 * @Author: 1453937336@qq.com 1453937336@qq.com
 * @Date: 2024-04-18 18:37:23
 * @LastEditors: 1453937336@qq.com 1453937336@qq.com
 * @LastEditTime: 2024-07-16 12:33:55
 * @FilePath: \itforce-hris\src\pages\organization\components\unit-modal.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <a-modal v-model:open="open" :title="$t('公司')" @cancel="hideModal" bodyStyle="font-size: 24px;" :maskClosable="false">
      <a-form layout="vertical" :model="formState" ref="formRef" style="margin-top: 24px;">
        <a-form-item :label="$t('公司名称')" prop="name" :rules="[{ required: true, message: $t('请输入') }]">
          <a-input v-model:value="formState.name" />
        </a-form-item>
        <a-form-item :label="$t('公司简称')" name="shortName" :rules="[{ required: true, message: $t('请输入') }]">
          <a-input v-model:value="formState.shortName" maxlength="20"/>
        </a-form-item>
        <a-form-item :label="$t('电话')">
          <a-input v-model:value="formState.phone" />
        </a-form-item>
        <a-form-item label="Email" prop="email" :rules="[
          { required: true, message: $t('请输入邮箱') },
          {
            pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
            message: $t('邮箱格式不正确')
          }
        ]">
          <a-input v-model:value="formState.email" />
        </a-form-item>
        <a-form-item :label="$t('网址')">
          <a-input v-model:value="formState.website" />
        </a-form-item>
        <a-form-item :label="$t('地址')">
          <a-textarea v-model:value="formState.address" allow-clear />
        </a-form-item>
        <a-form-item :label="$t('单元描述')">
          <a-textarea v-model:value="formState.description" allow-clear />
        </a-form-item>
        <a-form-item :label="$t('外部公司')">
          <a-select ref="select" v-model:value="formState.outSource" :placeholder="$t('请选择')"
          :getPopupContainer="
            triggerNode => {
              return triggerNode.parentNode || document.body;
            }
          ">
            <a-select-option :value="1">{{ $t('Yes') }}</a-select-option>
            <a-select-option :value="0">{{ $t('No') }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-button type="primary" :loading="loading" @click="handleOk">{{ $t('保存') }}</a-button>
      </template>
    </a-modal>
  </div>
</template>
<script setup>
  import { useI18n } from 'vue-i18n';
  import { ref, reactive } from 'vue';
  import { GetCodeDict, GetEnterpriseInfo } from "@/api/organization/index";
  const { t: $t } = useI18n();
  const emits = defineEmits(['addCompany'])

  const formState = ref({
    shortName: '',
    name: '',
    phone: '',
    email: '',
    website: '',
    address: '',
    outSource: 0,
    description: ''
  });
  const loading = ref(false);
  const open = ref(false);
  const showModal = (record) => {
    console.log('fff,', record)
    open.value = true
    if (record?.id) {
      getEnterpriseInfo(record.uuid)
    }
  }
  const getEnterpriseInfo = async (uuid) => {
    const { data } = await GetEnterpriseInfo(uuid)
    formState.value = cloneDeep(data)
  }
  const hideModal = () => {
    open.value = false
    formRef.value.resetFields();
    formState.value = {}
  }
  const formRef = ref(null);
  const handleOk = debounce(() => {
    loading.value = true
    formRef.value.validate().then(() => {
      submit()
    }).catch((error) => {
      loading.value = false
      // consoleerror('验证失败:', error);
    });
  }, 1000);
  const submit = async () => {
    loading.value = false
    emits('addCompany', formState.value)
  }
  defineExpose({
    showModal,
    hideModal
  });
</script>
<style lang="scss" scoped>
::v-deep {
  .ant-input-disabled,
  .ant-input[disabled] {
    color: rgba(0, 0, 0, 1);
  }
  .ant-form-item .ant-form-item-label >label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {
    content: none;
  }
}
</style>
